<template>
  <div class="product-container">
    <div class="my-header">
      <i class="back"></i>
      <strong>商品列表</strong>
      <i></i>
    </div>
    <!-- 商品列表 -->
    <div class="content">
      <div class="loadmore-warp" id="loadmore">
        <div class="tips" v-if="activity.notice!==''">
          <div class="icon"></div>
          <div style="padding-left:30px;line-height:20px;" v-html="activity.notice"></div>
        </div>
        <mt-loadmore :bottom-distance="50" @bottom-status-change="handleBottomChange" :top-method="loadTop" :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="product-list">
            <div><img style="width:100%" v-lazy="activity.bannerImg1" alt=""></div>
            <li class="product-item" @click="$router.push({path: '/product', query:{id: item.productId}})" v-for="(item,index) in proData" 
              :key="index">
              <div class="item-posre">
                <img v-lazy="item.activityImg" alt="">
              </div>
              <div class="item-product-text">{{item.isNew}}{{item.sellingPoints}}</div>
              <p class="original-price">吊牌价：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
              <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                <button type="button" class="jx-btn" v-if="item.stockNum>0">立即购买</button>
                <button type="button" class="jx-btn none" v-else> 暂时无货  </button>
              </p>
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
            </li>
            <div v-if="bannerShow"><img style="width:100%" v-lazy="activity.bannerImg2" alt=""></div>
            <!--<li class="product-item" @click="$router.push({path: '/product', query:{id: item.productId}})" v-for="(item,index) in proData" v-if="item.isNew==0"
              :key="index">
              <div class="item-posre">
                <img v-lazy="item.activityImg" alt="">
              </div>
              <div class="item-product-text">   {{item.isNew}}{{item.sellingPoints}}</div>
              <p class="original-price">吊牌价：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
              <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                <button type="button" class="jx-btn" v-if="item.stockNum>0">立即购买</button>
                <button type="button" class="jx-btn none" v-else> 暂时无货  </button>
              </p>
            </li>-->
          </ul>
          <div class="loadmoreText" slot="bottom" v-show="proData!=''">
            <span v-if="bottomStatus !== 'drop'">{{bottomText}}</span>
            <span v-else>释放更新</span>
          </div>
          <div class="empty-info cart-tips" v-if="proData == '' && isDone">
            <p>活动已经下架了哦</p>
          </div>
        </mt-loadmore>
      </div>

    </div>
    <ServiceIcon></ServiceIcon>
    <!-- 商品列表 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="shop">
        <div @click="$router.go(0)">
          <div class="iconfont icon-dianpu"></div><span>商品</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="cart">
        <div @click="$router.push('/cart')">
          <div class="iconfont icon-cart"></div><span>购物车</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="home">
        <div @click="$router.push({name:'order',query:{tab:0}})">
          <div class="iconfont icon-dingdan"></div><span>订单</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
    <BackHead></BackHead>
  </div>
</template>

<script>
  import ServiceIcon from '@/components/common/serviceIcon'
  import BackHead from '@/components/common/backHead'
  import wxShare from '@/mixins/wechat'
  import {
    getProductList
  } from '@/api/shop'

  import {
    decryptString,
    setLocalStorage,
    encryptString,
    getLocalStorage
  } from '@/utils'
  export default {
    data() {
      return {
        bannerShow: false,
        bottomStatus: '',
        bottomText: '上拉加载更多',
        selected: 'shop',
        proData: [],
        params: {
          pageIndex: 1,
          pageSize: 6
        },
        isDone: false,
        tips: false,
        activity: {
          notice: ''
        },
        showText: false,
        allLoaded: false
      }
    },
    components: {
      ServiceIcon,
      BackHead
    },
    computed: {
      bannerShow() {
      }
    },
    mixins: [wxShare],
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status
      },
      // 设置分享信息
      setShare(info) {
        const shareInfo = {
          title: info.labelName,
          desc: info.activeDoc,
          link: window.location.href,
          img: info.labelLogo
        }
        // mixins
        this.wechatShare(shareInfo)
      },
      loadBottom() {
        // 底部加载更多
        this.$refs.loadmore.onBottomLoaded()
        this.bottomText = ''
        this.fetchData()
      },
      loadTop() {
        // 下拉刷新
        this.loadDone = false
        this.proData = []
        this.$refs.loadmore.onTopLoaded()
        this.params.pageIndex = 1
        this.fetchData()
      },
      fetchData() {
        const params = {
          pageIndex: this.params.pageIndex,
          pageSize: this.params.pageSize,
          activityId: this.params.activityId
        }
        getProductList(params).then(res => {
          this.activity = res.data.activity
          this.proData = this.proData.concat(res.data.findGoodsList)
          this.allLoaded = !res.data.hasNext
          this.bottomText = this.allLoaded === true ? '没有更多了' : '上拉加载更多...'
          this.params.pageIndex += 1
          if (this.proData.length > 0) {
            this.proData.map(item => {
              const data = {
                goodsId: item.goodsId,
                activityId: item.activityId,
                bid: this.params.bid
              }
              // 加密
              const encryptStr = encryptString(JSON.stringify(data))
              item.productId = encryptStr.replace(/\+/g, '-')
            })
          } else {
            this.isDone = true
          }
          this.setShare(this.activity)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    activated() {
      // 修复keepalive tab不更新
      if (this.$route.name === 'shop') {
        this.selected = 'shop'
      }
    },

    mounted() {
      // this.tips = true
      this.ActiveNo = this.$route.query.id
      if (this.ActiveNo) {
        // 替换所有的'-'
        const decryptStringStr = this.ActiveNo.replace(/\-/g, '+')
        // 解密
        const parseStr = decryptString(decryptStringStr)
        const queryParams = JSON.parse(decodeURIComponent(parseStr))
        // 活动
        this.params.activityId = queryParams.activityId
        this.params.bid = queryParams.bid
        setLocalStorage('activityId', queryParams.activityId)
        setLocalStorage('sharebid', queryParams.bid)
      } else {
        this.params.activityId = getLocalStorage('activityId')
        this.params.bid = getLocalStorage('sharebid')
      }
      this.fetchData()
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .loadmoreText {
    /* background: #f0f3f5; */
    // display: flex;
    // -webkit-display: flex;
    // flex: 1;
    // justify-content: center;
    // align-items: center;
    @include flexbox(center,
    center,
    row,
    nowrap);
    font-size: 12px;
    background: transparent;
    padding: 10px 0;
    >span {
      padding-left: 10px;
    }
  }

  .product-container {
    // height: 100%;
    .content {
      /* 商品列表 */
      .tips {
        padding: 10px;
        background: #FFFEEB;
        color: #000;
        position: relative;
        .icon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background: url('~assets/common/images/laba.png') no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
        }
        p {
          line-height: 20px;
          padding-left: 25px;
          display: inline-block;
        }
      }
      .loadmore-warp {
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        .product-list {
          background: #fff;
          padding-right: 10px;
          @include flexbox(space-between,
          center,
          row,
          wrap);
          overflow: hidden;
          clear: both;
          .product-item {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            flex: 0 0 50%;
            -webkit-flex: 0 0 50%;
            .item-posre {
              position: relative;
              text-align: center;
              img {
                max-height: 185px;
                max-width: 100%;
              } // &:after {
              //    display: block;
              //    position: absolute;
              //    content: '';
              //    width: 100%;
              //    height: 23px;
              //    bottom: 0;
              //    background-color: #333333;
              //    opacity: 0.5;
              // }
              // &:before {
              //    display: block;
              //    position: absolute;
              //    content: '失效';
              //    width: 100%;
              //    bottom: 0;
              //    z-index: 100;
              //    color:#ffffff;
              //    line-height: 23px;
              // }
            }
            .item-product-text {
              margin: .1rem 0 0 .1rem;
              font-size: 14px;
              line-height: 20px;
              height: 40px; // overflow: hidden;
              // display: -webkit-box;
              // -webkit-line-clamp: 2;
              // -webkit-box-orient: vertical; 
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-box-orient:vertical;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2; 
              @include textoverflow(2);
            }
            .size {
              white-space: normal;
              word-break: break-all;
              @include textoverflow(1);
            }
            .item-product-info {
              @include flexbox(space-between,
              center,
              row,
              wrap);
              color: #f23030;
              padding: 0 0 .2rem .1rem;
              font-size: 16px;
              span {
                i {
                  font-size: 12px;
                  margin-right: .1rem;
                }
              }
              .jx-btn {
                color: #ffffff;
                font-size: 13px;
                background: #f23030;
                border: 1px solid #f23030!important;
                padding: 0.1rem 0.2rem;
                @include radius(3px)
              }
              .none {
                background: #ddd;
                border: 1px solid #999!important;
              }
            }
            .original-price {
              i {
                text-decoration: line-through;
              }
              padding: .2rem .1rem .1rem .1rem;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .cart-tips {
          margin-top: 40px;
          position: relative;
          z-index: 1;
          padding: $padding 25px;
          @include flexbox(flex-start,
          center,
          column,
          nowrap);
          p {
            font-size: 14px;
            color: #999;
            line-height: 2;
          }
        }
      }

      /* 商品列表 */
    }
  }

</style>
